<div class="{{global.state['theme']}}">
  <!--Default Menu-->
  <ion-menu [content]="content" id="menu-components">
    <ion-header>
      <ion-toolbar>
        <ion-title>Menu</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-list>
        <button menuClose ion-item *ngFor="let p of pages" [class.highlight]="p.active" (click)="openPage(p)">
        {{p.title}}
      </button>
      </ion-list>
    </ion-content>
  </ion-menu>
  <!--Side Menu with avatar-->
  <ion-menu [content]="content" id="menu-avatar">
    <ion-content>
      <div #header>
        <ion-row style="align-items:center;">
          <ion-col col-3>
            <img src="assets/icon/icon-email.svg" />
            <span class="icon-badge">4</span>
          </ion-col>
          <ion-col col-6>
            <img class="user-avatar round" [src]="chosenPicture || placeholder" onerror="this.src='assets/img/avatar/girl-avatar.png'"
            />
          </ion-col>
          <ion-col col-3>
            <img src="assets/icon/icon-calendar.svg" />
          </ion-col>
        </ion-row>
        <ion-row style="justify-content: center;">
          <h3>Paula Bolliger</h3>
        </ion-row>
      </div>
      <ion-list no-lines>
        <button menuClose ion-item detail-none *ngFor="let p of pages" (click)="openPage(p)">
          <!--<ion-icon [name]="p.icon" item-left></ion-icon>-->
          {{p.title}}
        </button>
      </ion-list>
    </ion-content>
  </ion-menu>
  <!--Right side menu-->
  <ion-menu side="right" type="push" [content]="content" id="menu-right">
    <ion-content>
      <ion-list no-lines>
        <button menuClose icon-only ion-item detail-none (click)="rightMenuClick(item)" *ngFor="let item of rightMenuItems; let i = index">
          <div *ngIf="item.active" class="active-menu-item"></div>
          <ion-icon [name]="item.icon"></ion-icon>
        </button>
      </ion-list>
    </ion-content>
  </ion-menu>
  <!--Material Design Menu-->
  <ion-menu [content]="content" id="menu-material">
    <ion-content>
      <div class="menu-header">
        <!--material-design-background-->
        <img class="user-avatar round" [src]="chosenPicture || placeholder" onerror="this.src='assets/img/avatar/girl-avatar.png'"
        />
        <p class="name">Paula Bolliger</p>
        <p class="e-mail">pbolliger@email.com</p>
      </div>
      <ion-list no-lines>
        <button menuClose="left" ion-item detail-none *ngFor="let p of pages" (click)="openPage(p)">
        <ion-icon [name]="p.icon" item-left></ion-icon>
        {{p.title}}
      </button>
      </ion-list>
    </ion-content>
  </ion-menu>
  <!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
  <ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
</div>
